<template>
  <view>
    <view class="u-page">
      <u-sticky>
        <view class="common-top-searchbar">
          <u-search v-model="searchKeyValue" :show-action="false" shape="square"></u-search>
        </view>
      </u-sticky>
      <view class="tree-list">
        <!-- <my-u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange"> -->
          <my-u-collapse :value="expandValue" :select-type="true">
            <treeItem :list="treeData" :show-count="true" :do-filter="true" :select-type="true"
              ref="mySelectTree"
              @onItemClick="handlerItemClick"></treeItem>
          </my-u-collapse>
        <!-- </my-u-checkbox-group> -->
      </view>
      <view class="chooseItems common-bottom-block flex-center">
          <view class="text1">已选择 <text>（{{parentData.checkedList.length}}）</text>：</view>
          <!-- <view id="iconScroll"> -->
            <view class="icons"> 
                <view class="item" v-for="(item, index) in parentData.checkedList" :key="item.id">
                    <textIcon :lwicon="item.icon" :lwtext="item.label"></textIcon>
                </view>
            </view>
          <!-- </view> -->
          <view class="confirm">
              <u-button type="primary" @click="confirmSelect" :disabled="!hasData">完成</u-button>
          </view>
      </view>
    </view>
  </view>
</template>

<script>
  import treeItem from '@/components/treeItem/index.vue';
  import textIcon from '@/components/textIcon/index.vue';
  import _ from 'lodash';

  export default {
    name: 'tree-select-page',
    components: {
      treeItem, textIcon
    },
    options: { styleIsolation: 'shared' },
    data() {
      return {
        searchKeyValue: '',
        expandValue: ['*'],
        treeData: [],
        multity: true,
        searchAble: false,
        filterAble: true,
        parentData: {
          checkedList: [],
        },
        hasData: false
      }
    },
    onLoad(options) {
      var params = JSON.parse(decodeURIComponent(options.query));
      if (params.title) {
        uni.setNavigationBarTitle({
          title: params.title
        });
      }
      _.assign(this, params);
      this.loadList();
    },
    mounted() {

    },
    watch: {
      searchKeyValue: function () {
        this.filterAble && this.treeData.forEach(this.filterFoo);
      },
      'parentData.checkedList': function (v) {
        this.$refs.mySelectTree.updateChecker();
        this.hasData = v.length;
      }
    },
    methods: {
      checkboxChange: function (a) {
        console.log(a);
      },
      loadList: function () {
        var vm = this;
        uni.showLoading();
        vm.getAndLoad('列表', vm.loadApi, function (res) {
          uni.hideLoading();
          var treeData = res.data;
          treeData.forEach(vm.filterFoo);
          treeData.forEach(vm.initItem);
          vm.treeData = treeData;
        });
      },
      filterFoo: function (item) {
        var kv = this.searchKeyValue || '';
        if (item.children) {
          item.children.forEach(this.filterFoo);
          item.show = item.children.some(n => n.show);
        } else {
          item.show = !this.filterAble || !kv || item.label.includes(kv.trim());
        }
      },
      initItem: async function (item) {
        if (item.children) {
          item.children.forEach(this.initItem);
          item._checked = item.children.every(n => n._checked);
        } else {
          item._checked = false;
        }
      },
      handlerItemClick: function (item) {
        this.$emit('itemClick', item)
      },
      confirmSelect: function () {
          var pages = getCurrentPages();
          var currPage = pages[pages.length - 1]; //当前页面
          var prevPage = pages[pages.length - 2]; //上一个页面
          // #ifdef H5
          prevPage.$vm.query = val //h5写法
          // #endif
          //#ifdef MP-WEIXIN||MP-QQ
          prevPage.setData({
            'callBackData': this.parentData.checkedList,
          }) //小程序写法
          // #endif
          
          uni.navigateBack();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tree-list {
    background: #fff;
    margin-top: 20rpx;
    padding-bottom: 124rpx;
  }
  .chooseItems {
    padding: 20rpx;
    width: 750rpx;
    box-sizing: border-box;
    justify-content: space-between;
    /deep/ {
        .text1 {
          font-size: 28rpx;
          font-weight: bold;
          min-width: 210rpx;
        }
        .icons {
            display: flex;
            align-items: center;
            flex-grow: 1;
            overflow-x: scroll;
            margin-right: auto;
            // justify-content: flex-end;
            .item {
                display: flex;
                align-items: center;
                margin-right: 10rpx;
                image {
                    border-radius: 10rpx;
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
        .confirm {
            min-width: 140rpx;
            margin-left: 10rpx;
            button {
                height: 65rpx;
            }
        }
    }
  }
</style>